import React from 'react'
import { useDispatch, useSelector } from "react-redux";

import {
  incrementAction,
  decrementAction,
  waitincrementAction
} from '../../store/actions/countAction'

export default function Count() {
  const dispatch = useDispatch()

  const count = useSelector((state) => state.count.count)  //拿到store中的数据
  const movieList = useSelector((state) => state.movie.movieList)  //拿到store中的数据

  //累加
  const incrementHandle = () => {
    dispatch(incrementAction(1))
  }

  //累减
  const decrementHandle = () => {
    dispatch(decrementAction(1))
  }

  //基数累减
  const ifOddDecrementHandle = () => {
    if (count % 2 !== 0) {
      dispatch(decrementAction(1))
    }
  }

  // /等待2秒累加
  const waitincrementHandle = () => {
    dispatch(waitincrementAction(1))
  }


  return (
    <div>
      <h1>我是Count组件我的count值是{count}</h1>
      <p>Movie组件的电影条数是{movieList.length}</p>
      <button onClick={incrementHandle}>累加</button>
      <button onClick={decrementHandle}>累减</button>
      <button onClick={ifOddDecrementHandle}>基数累减</button>
      <button onClick={waitincrementHandle}>等待2秒累加</button>
    </div>
  )
}
